9
תגובות

ajax אג'קס

פתח Aviway ,
שלום לכולם,
יש לי טופס עם אפשרות בחירת אזור בארץ, ואח"כ לבחור עיר מאותו אזור שבחרתי.
איך אני כותב את הקוד בשביל שישנה לי את תיבת הSELECT של העיר בהתאם לאזור שבחרתי?
בAJAX כמובן!
מה שעשיתי כרגע זה ONCLICK על תג הOPTION, הוא קורא לפונקציה ושולח לה את הID של האזור.

תודה מראש לעוזרים.

9 תשובות

avatar ענה Aviway ב 10 לאפריל 2012 #

לא הבנת אותי נכון, אולי ההסבר שלי לא היה מדויק.
התכוונתי לכך שברגע שאני בוחר אזור בארץ מתגית SELECT אחת, אז תגית SELECT אחרת משתנה.
לדוגמא, תגית הSELECT הראשונה:

<select class="select_area" id="area" name="tf_area" >
<option value="1">צפון</option>
<option value="2">מרכז</option>
<option value="3">דרום</option>
</select>

לאחר בחירת אזור בארץ מהתג הנ"ל, התג הבא אמור להשתנות בהתאם.
לדוגמא, אם בחרתי את OPTION 2 מרכז, אז התג הבא יראה כך:
<select class="select_sec_area" id="sec_area" name="tf_sec_area" >
<option value="1">אזור דן</option>
<option value="2">ירושלים</option>
<option value="3">השרון</option>
...
..
.
</select>

כמובן שזה אמור להשתנות באג'קס.

avatar ענה Aviway ב 10 לאפריל 2012 #

אבל אני לא רוצה שהדף ירענן, וגם אני צריך את המשתנה של האזור שנבחר בשביל פונקציית הFOREACH ששואבת את כל האזורים המשניים לפי האזור הראשי שנבחר.

avatar ענה OrelBeY ב 10 לאפריל 2012 #

<script>
function changeSelect() {
var x=document.getElementById("mySelect").selectedIndex;
var y=document.getElementById("mySelect").options;
if (y[x].index==1) {
var lol=new Array("29299", "82929", "2929", "jffjd");
}
else if (y[x].index==2) {
var lol=new Array("223344555666", "ncnmjdfskjsdf", "32009832823489432", "383idjkdkls", "boringgg");
}
else {
var lol=new Array("33003w448", "484u4i4w4", "809320932823");
}
var a;
for (option in lol) {
var a += "<option>" + lol[option] + "</option>";
}
document.getElementById("myAnotherSelect").innerHTML=a;
}
</script>

<select id="mySelect" onchange="changeSelect()">
<option>One</option> <!-- default -->
<option>Two</option>
<option>Three</option>
</select>
<select id="myAnotherSelect"> <!-- default for 'One' -->
<option>33003w448</option>
<option>484u4i4w4</option>
<option>809320932823</option>
</select>

avatar ענה Aviway ב 10 לאפריל 2012 #

אחי אפשר קצת הסבר על מה שעשית, כי לא ממש הבנתי.

avatar ענה OrelBeY ב 11 לאפריל 2012 #

HTML:
יצרתי שתי תיבות Select. בעת שינוי הערך הנבחר בתיבה הראשונה, מופעלת הפונקציה changeSelect() (ב-JS).
בתיבה הראשונה יש את הערכים "One", "Two", "Three".
מכיוון ש-"One" הוא הראשון, הוא זה שנבחר אוטומטית בעת טעינת הדף, ולכן הצגתי אחר-כך תיבת Select נוספת שמכילה את הערכים שהייתי רוצה שיוצגו כאשר הערך "One" נבחר.

זה הכל בקוד ה-HTML, ועכשיו עוברים לקוד ה-JS:
(אם אתה לא משתמש ב-HTML5 עליך להוסיף type מתאים לתגית script.)
למשתנה x הכנסתי את הערך שנבחר ב-Select הראשון, ולמשתנה y הכנסתי סוג של מערך של הערכים של אותו ה-Select.
מכיוון שב-Select הראשון ישנם שלושה ערכים, השתמשתי במבנה של if...else if...else בכדי לבצע פעולות שונות בכל פעם שנבחר ערך אחר.
במידה ונבחר הערך השני, "Two" (הספירה מתחילה מ-0, ולכן זה מסומן בתור 1), הוריתי ליצור מערך המכיל 4 מחרוזות: "29299", "82929", "2929" ו-"jffjd".
אני מניח שאתה יכול להבין לבד מה קורה אם נבחר הערך השלישי או ברירת המחדל (הראשון)...
לאחר מכן יצרתי לולאה שיוצרת מחרוזת המכילה תגי Option המכילים את איברי המערך שנוצר בדיוק לפני כן, ולבסוף הכנסתי אותה לתוך ה-Select השני.

avatar ענה Aviway ב 16 לאפריל 2012 #

הבעיה שלי בקוד הזה היא בעיקר עניין שילוב הPHP עם הJS, תמיד זה יצר לי בעיות.
אני הבנתי פחות או יותר את ההסבר שלך בדגש על הפחות, אבל איך אני משלב את SELECT הראשון עם הFOREACH של הSELECT השני.
ז"א, אין לי נתונים קבועים בתיבות הבחירה, כל הנתונים מגיעים מהDB בקוד PHP בFOREACH.
בתיבה הראשונה יש לי FOREACH שמוציא את כל האזורים ראשיים בארץ:

<select id="mySelect" onchange="changeSelect()" name="tf_sec_area">
  <option value="">בחר אזור</option>
  <option value="" class="area_head">צפון</option>
  <?php
  foreach ($get_sec_areas_north as $key => $val){
  echo '<option onclick="send_sec_area('.$val['sec_area_id'].')" value="'.$val['sec_area_id'].'">'.$val['sec_area_name'].'</option>';
  }
  echo'
  <option value="" class="area_head">מרכז</option>';
  foreach ($get_sec_areas_center as $key => $val){
  echo '<option onclick="send_sec_area('.$val['sec_area_id'].')" value="'.$val['sec_area_id'].'">'.$val['sec_area_name'].'</option>';
  }
  echo'
  <option value="" class="area_head">דרום</option>';
  foreach ($get_sec_areas_south as $key => $val){
  echo '<option onclick="send_sec_area('.$val['sec_area_id'].')" value="'.$val['sec_area_id'].'">'.$val['sec_area_name'].'</option>';
  }
  ?>
</select>

ובתיבת בחירה השנייה יש FOREACH שאמור להראות את הערים באותו אזור שנבחר וזה עפ"י הID של האזור הראשי שנבחר בתיבת הבחירה הראשונה:
<select id="myAnotherSelect" name="tf_city_select">
  <option value="">בחר עיר/ישוב</option>
  <?php
  foreach ($get_all_city_rows_admin as $key => $val){
    if($val['city_sec_area'] == $sec_area){
    echo '<option value="'.$val['city_id'].'">'.$val['city_name'].'</option>';
    }
  }
  ?>
</select>


מקווה שהבנת אותי, ואני מצטער שאני מפגין בורות כזאת, אחרת לא הייתי מעלה את השאלה כאן.

avatar ענה OrelBeY ב 16 לאפריל 2012 #

זה בסדר, אנחנו פה כדי לנסות לעזור כמה שאפשר. :)

אם לא הבנת את הקוד שכתבתי (חוץ מהקטע של ה-.selectedIndex, .options וה-y[x].index, כי זה לא ממש ידוע עד שמתעסקים עם <select> וכאלה), אני ממליץ לך ללמוד JS ב-w3schools. זה מועבר שם בצורה מאוד פשוטה, ובתכלס - יש לך הרבה כבר מ-PHP. (כל זה אם אתה לא יודע JS)
על כל פנים, אתה מציג מהמסד את הנתונים ל-select הראשון, וב-select השני את הנתונים של ברירת המחדל של הראשון. אחר-כך אתה שם את שאר האפשרויות של ה-select השני בתוך תנאי ה-else if אחד-אחד.
אם לא הבנת נסה לקרוא שוב את הקוד עם ההסבר שכתבתי.